<template>
  <el-container>
    <el-header height="300px">
      <div style="width: 1200px; margin: 0 auto">
        <img src="@/assets/imgs/shark.png" style="width: 300px; height: 150px;vertical-align: middle" alt=""/>
        <a href="">首页</a>
        <el-divider direction="vertical"></el-divider>
        <a href="">热点资讯</a>
        <el-divider direction="vertical"></el-divider>
        <a href="">商家入驻</a>
        <el-divider direction="vertical"></el-divider>
        <a href="">社会招聘</a>
        <el-divider direction="vertical"></el-divider>
        <a href="">校园招聘</a>
        <el-divider direction="vertical"></el-divider>
        <a href="">帮助</a>
      </div>

      <!--导航菜单开始-->
      <!--      div 不设置颜色 -->
      <div style="background-color: #82c8ec">
        <!--        activeIndex  默认的首页   model="horizonal"水平剧中
        @select 方法 处理-->
        <el-menu
            style="width: 1200px; margin: 0 auto"
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#82c8ec"
            text-color="#fff"
            active-text-color="#fff"
            @select="handleSelect"
            router
        >
          <el-menu-item
              v-for="item in category"
              :key="item.id"
              :index="`/index/${item.id}`"
          >
            {{ item.name }}
          </el-menu-item>


          <template #append>
            <div style="float: right; position: relative; top: 10px">
              <el-input placeholder="请输入搜索内容">
                <!--                追加一个按钮-->
                <template #append>
                  <el-button>
                    <Search/>
                  </el-button>
                </template>
              </el-input>
            </div>
          </template>
        </el-menu>
      </div>
      <!--导航菜单结束-->
    </el-header>

    <el-main style="width: 1200px; margin: 0 auto">
      <!--      gutter 设置中间的间隔-->
      <el-row gutter="20">
        <el-col :span="18">
          <!--轮播图-->
          <el-carousel height="300px">
            <el-carousel-item v-for="item in lunboArr">
              <el-image
                  :src="item.imageUrl"
                  fit="cover"
                  style="width: 100%; height: 100%;"
              ></el-image>
            </el-carousel-item>

          </el-carousel>
        </el-col>

        <!--表格-->
        <el-col :span="6" style="height: 300px; padding: 0;">
          <el-card>
            <h3>
              <i style="font-weight: bold">
                销量最高
              </i>
            </h3>
            <el-divider></el-divider>
            <div class="table-container">
              <el-table :data="arr" size="small" border style="width: 100%;">
                <el-table-column label="排名" width="50" type="index"></el-table-column>
                <el-table-column label="商品标题" prop="title" min-width="100"></el-table-column>
                <el-table-column label="销量" prop="saleCount" width="80"></el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!--商品列表开始-->
      <el-row gutter="20">
        <el-col :span="6" v-for="p in productArr" :key="p.title">
          <el-card>
            <img :src="p.url" width="100%" alt=""/>
            <div>
              <p style="font-size: 15px; height: 40px; margin-top: 0">{{ p.title }}</p>
              <p style="font-size: 12px; color: #666">
                ￥{{ p.price }} <s>{{ p.oldPrice }}</s>
                <span style="float: right">销量:{{ p.saleCount }}</span>
              </p>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!--商品列表结束-->
    </el-main>

    <el-footer>
      <!--
      <div style="height: 95px; background-image: url('@/assets/images/wave.png')">
        <div style="background-color: #3f3f3f; text-align: center; color: #b1b1b1; padding: 30px 0">
          <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
          <p>达内在线 WWW.TMOOC.CN 专注于IT职业技能培训</p>
          <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
        </div>
      </div>
      -->
    </el-footer>
  </el-container>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import {getList_Category} from "@/api";

const initData = async () => {
  const res = await get_Carousel()
  lunboArr.value = res.data;
}
onMounted(() => {
  initData();
})

const lunboArr = ref([])

const activeIndex = ref('1');
const arr = ref([
  {title: '小米电视', saleCount: 685},
  {title: '李宁毛巾', saleCount: 457},
  {title: '安踏拖鞋', saleCount: 185}
]);
const category = ref([])
const getCategory = async () => {
  const res = await getList_Category()
  if (res.code === 200) {
    category.value = res.data;
  }
}
import {get_Carousel} from "@/api/carousel";

onMounted(() => {
  getCategory()
})
const productArr = ref([
  {
    title: '森马牛仔裤女宽松慢跑裤运动风2022春季新款显瘦束脚长裤复古',
    price: 233,
    oldPrice: 598,
    url: '@/assets/images/a.jpg',
    saleCount: 2342
  },
  {
    title: '茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装',
    price: 233,
    oldPrice: 598,
    url: '@/assets/images/b.jpg',
    saleCount: 2342
  },
  {
    title: '雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季上衣潮ins',
    price: 233,
    oldPrice: 598,
    url: '@/assets/images/c.jpg',
    saleCount: 2342
  },
  {
    title: '【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚连帽外套冬',
    price: 233,
    oldPrice: 598,
    url: '@/assets/images/d.jpg',
    saleCount: 2342
  },
  {
    title: 'BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花宽松外套ins',
    price: 233,
    oldPrice: 598,
    url: '@/assets/images/e.jpg',
    saleCount: 2342
  },
  {
    title: '香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领紫色呢子大衣',
    price: 233,
    oldPrice: 598,
    url: '@/assets/images/f.jpg',
    saleCount: 2342
  },
  {
    title: 'SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦',
    price: 233,
    oldPrice: 598,
    url: '@/assets/images/g.jpg',
    saleCount: 2342
  },
  {
    title: '美特斯邦威女MTEE 贺岁系列中长款风衣736598',
    price: 233,
    oldPrice: 598,
    url: '@/assets/images/h.jpg',
    saleCount: 2342
  },
  {
    title: 'imone2021秋款黑色小西装外套女韩版学生宽松学院风外套jk外套',
    price: 233,
    oldPrice: 598,
    url: '@/assets/images/i.jpg',
    saleCount: 2342
  },
  {
    title: 'BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫衣情侣上衣',
    price: 233,
    oldPrice: 598,
    url: '@/assets/images/j.jpg',
    saleCount: 2342
  },
  {
    title: '憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修身绵羊皮风衣外',
    price: 233,
    oldPrice: 598,
    url: '@/assets/images/k.jpg',
    saleCount: 2342
  },
  {
    title: '美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色潮流女士牛仔',
    price: 233,
    oldPrice: 598,
    url: '@/assets/images/a.jpg',
    saleCount: 2342
  }
]);

const handleSelect = (key, keyPath) => {
  console.log(key, keyPath);
};

</script>

<style scoped>
header a {
  /*
    //去掉 下划线  和设置颜色
   */
  text-decoration: none;
  color: #6c6c6c;
}

.el-table .el-table-colunm {
  padding: 0; /* 去掉自带的上下间距 */
}

.table-container {
  max-height: 220px; /* 根据需要调整高度 */
  overflow-y: auto; /* 添加垂直滚动条 */
}
</style>
